<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性,必须当作属性来用,不能当作方法调用,即不能加小括号 -->
    <input type="text" v-model="xing" />
    <input type="text" v-model="ming" />
    <!-- 有缓存特点 性能更好 不会反复执行函数 -->
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <h2>调用方法</h2>
    <p>{{ getfullName() }}</p>
    <p>{{ getfullName() }}</p>
    <p>{{ getfullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "李",
      ming: "四",
    };
  },
  //计算属性,要写到和data平级的computed中
  computed: {
    //所有的计算属性,都放在这里,必须返回计算的结果
    fullName() {
      console.log("计算属性方法执行");
      return this.xing + this.ming;
    },
  },
  methods: {
    getfullName() {
      console.log("方法被调用!!!!");
      return this.xing + this.ming;
    },
  },
};
</script>

<style>
</style>